<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh">
<head>

</head>

<body class="no-skin">


	<!-- /section:settings.box -->
	<div class="page-content-area">
		<div class="page-header">
			<h1>
				Table <small> <i
					class="ace-icon fa fa-angle-double-right"></i> 学生信息管理
				</small>
			</h1>
		</div>
		<!-- /.page-header -->

		<!-- 添加按钮 -->
		<button id="addbtn" type="button" class="btn btn-success btn-lg"
			data-toggle="modal" data-target="#add">
			<i class="ace-icon fa fa-plus align-top bigger-125"></i> 添加学员信息
		</button>

		<!-- 批量添加按钮 -->
		<button id="batchAddBtn" type="button" class="btn btn-success btn-lg">
			<i class="ace-icon fa fa-plus align-top bigger-125"></i> 批量添加学员信息
		</button>

		<!-- 添加学员Modal -->
		<div class="modal fade" id="add" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">添加学员</h4>
					</div>

					<form:form id="userForm" action="add" method="post"
						modelAttribute="user">
						<!-- boby -->
						<div class="modal-body">
							<table>
								<tr>
									<td align="left"><spring:message code="user.id.message" />:&nbsp;</td>
									<td align="right"><form:input type="text" path="userID"
											class="idReadonly" readonly="false" required="true"
											minlength="6" maxlength="20" number="true"
											cssClass="{digits:true}" /> <!--  -->
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<!--  -->
									<td><spring:message code="user.name.message" />:&nbsp;</td>
									<td><form:input type="text" path="userName"
											required="true" minlength="2" maxlength="4" /></td>
								</tr>

								<tr>
									<td><spring:message code="user.gender.message" /> &nbsp;</td>
									<td><form:input type="text" path="gender"
											style="display: none" id="user_gender" />: <spring:message
											code="user.boy.message" />：<input type="radio" name="gender"
										class="boy" value="0">&nbsp;&nbsp;&nbsp;&nbsp;<spring:message
											code="user.girl.message" />：<input type="radio"
										name="gender" class="girl" value="1"></td>


									<td align="left"><spring:message
											code="user.birthday.message" />:&nbsp;</td>
									<td id="birthday-date" align="right"><form:input
											type="text" path="birthday" required="true"
											cssClass="{dateISO:true,date:true}" /> <form:errors
											path="birthday"></form:errors></td>

								</tr>
								<tr>

									<td><spring:message code="user.tel.message" />:&nbsp;</td>
									<td><form:input type="text" path="tel" digits="true"
											minlength="11" /></td>

									<td><spring:message code="user.address.message" />:&nbsp;</td>
									<td><form:input type="text" path="address" /></td>
								</tr>
								<!-- password -->
								<tr>
									<td><spring:message code="user.password.message" />:&nbsp;</td>
									<td><form:input type="password" path="password" /></td>
								</tr>

							</table>
						</div>

						<!-- modal-footer -->
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">关闭</button>
							<button id="submit" type="submit" class="btn btn-primary">添加</button>
						</div>
					</form:form>
				</div>
			</div>
		</div>

		<!-- 批量添加学员模态框 -->
		<!-- Modal -->
		<div class="modal fade" id="uploadFileModal" tabindex="-1"
			role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">批量添加学员</h4>
					</div>
					<!-- boby -->
					<form:form action="uploadFile" method="post"
						enctype="multipart/form-data">
						<div class="modal-body">
							<input id="uploadFile" type="file" name="uploadFile">
						</div>

						<!-- modal-footer -->
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">关闭</button>
							<button id="batchSaveStudentBtn" type="submit"
								class="btn btn-primary">保存</button>
						</div>
					</form:form>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
				<div class="row">
					<div class="col-xs-12">
						<table id="sample-table-1"
							class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th class="center"><label class="position-relative">
											<input type="checkbox" class="ace" /> <span class="lbl"></span>
									</label></th>
									<th>学号</th>
									<th>名字</th>
									<th class="hidden-480">性别</th>

									<th><i
										class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i> 出生年月</th>
									<th class="hidden-480">电话</th>
									<th>住址</th>
									<th></th>
								</tr>
							</thead>

							<tbody>
								<c:forEach items="${userlist.dates }" var="user">
									<tr>
										<td class="center"><label class="position-relative">
												<input type="checkbox" class="ace" /><span class="lbl"></span>
										</label></td>

										<td>${user.userID}</td>
										<td>${user.userName}</td>
										<td><c:if test="${user.gender > 0}">
												<p>
													<c:out value="女"></c:out>
												</p>
											</c:if> <c:if test="${user.gender == 0}">
												<p>
													<c:out value="男"></c:out>
												</p>
											</c:if></td>
										<td><fmt:formatDate value="${user.birthday}" type="date"
												dateStyle="default" /></td>

										<td class="hidden-480">${user.tel}</td>
										<td>${user.	address}</td>
										<td>
											<div class="hidden-sm hidden-xs btn-group">

												<button id="${user.userID}" class="btn btn-xs btn-info"
													data-toggle="modal" data-target="#add">
													<i class="ace-icon fa fa-pencil bigger-120"></i>
												</button>

												<button class="btn btn-xs btn-danger" data-toggle="modal"
													data-target="#delete-${user.userID}">
													<i class="ace-icon fa fa-trash-o bigger-120"></i>
												</button>

											</div>

											<div class="hidden-md hidden-lg">
												<div class="inline position-relative">
													<button class="btn btn-minier btn-primary dropdown-toggle"
														data-toggle="dropdown" data-position="auto">
														<i class="ace-icon fa fa-cog icon-only bigger-110"></i>
													</button>

													<ul
														class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">


														<li><a href="#" class="tooltip-success"
															data-rel="tooltip" title="Edit" data-toggle="modal"
															data-target="#edit-${user.userID}"> <span
																class="green"> <i
																	class="ace-icon fa fa-pencil-square-o bigger-120"></i>
															</span>
														</a></li>

														<li><a href="#" class="tooltip-error"
															data-rel="tooltip" title="Delete" data-toggle="modal"
															data-target="#delete-${user.userID}"> <span
																class="red"> <i
																	class="ace-icon fa fa-trash-o bigger-120"></i>
															</span>
														</a></li>
													</ul>
												</div>


											</div> <!-- 删除模态框 --> <!-- Modal -->
											<div class="modal fade" id="delete-${user.userID}"
												tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
												<div class="modal-dialog" role="document">
													<div class="modal-content">
														<div class="modal-header">
															<button type="button" class="close" data-dismiss="modal"
																aria-label="Close">
																<span aria-hidden="true">&times;</span>
															</button>
															<h4 class="modal-title" id="myModalLabel">删除学员</h4>
														</div>
														<!-- boby -->
														<div class="modal-body">确定要删除${user.userID}吗？</div>

														<!-- modal-footer -->
														<div class="modal-footer">
															<button type="button" class="btn btn-default"
																data-dismiss="modal">关闭</button>
															<a href="delete/${user.userID}"><button type="button"
																	class="btn btn-primary">确定</button></a>
														</div>
													</div>
												</div>
											</div>
										</td>

									</tr>
								</c:forEach>
							</tbody>
						</table>
						<jsp:include page="../common/page.jsp"><jsp:param
								name="url" value="listuser" />
							<jsp:param name="items" value="${userlist.totalSize}" />
						</jsp:include>
					</div>
					<!-- /.span -->
				</div>
				<!-- /.row -->

				<!-- PAGE CONTENT ENDS -->
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->
	</div>
	<!-- /.page-content-area -->
	<!-- /.main-container -->

	<!-- basic scripts -->
	<!--[if !IE]> -->
	<script type="text/javascript">
		window.jQuery
				|| document
						.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.min.js'>"
								+ "<"+"/script>");
	</script>

	<!-- <![endif]-->

	<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
	<script type="text/javascript">
		if ('ontouchstart' in document.documentElement)
			document
					.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.mobile.custom.min.js'>"
							+ "<"+"/script>");
	</script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/bootstrap.min.js"></script>

	<!-- page specific plugin scripts -->
	<script
		src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.bootstrap.js"></script>

	<!-- ace scripts -->
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace-elements.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace.min.js"></script>

	<!-- inline scripts related to this page -->
	<script type="text/javascript">
		jQuery(function($) {
			var oTable1 = $('#sample-table-2')
			//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
			.dataTable({
				bAutoWidth : false,
				"aoColumns" : [ {
					"bSortable" : false
				}, null, null, null, null, null, {
					"bSortable" : false
				} ],
				"aaSorting" : [],

			//,
			//"sScrollY": "200px",
			//"bPaginate": false,

			//"sScrollX": "100%",
			//"sScrollXInner": "120%",
			//"bScrollCollapse": true,
			//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
			//you may want to wrap the table inside a "div.dataTables_borderWrap" element

			//"iDisplayLength": 50
			});
			/**
			var tableTools = new $.fn.dataTable.TableTools( oTable1, {
				"sSwfPath": "../../copy_csv_xls_pdf.swf",
			    "buttons": [
			        "copy",
			        "csv",
			        "xls",
					"pdf",
			        "print"
			    ]
			} );
			$( tableTools.fnContainer() ).insertBefore('#sample-table-2');
			 */

			$(document).on(
					'click',
					'th input:checkbox',
					function() {
						var that = this;
						$(this).closest('table').find(
								'tr > td:first-child input:checkbox').each(
								function() {
									this.checked = that.checked;
									$(this).closest('tr').toggleClass(
											'selected');
								});
					});

			$('[data-rel="tooltip"]').tooltip({
				placement : tooltip_placement
			});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				//var w2 = $source.width();

				if (parseInt(off2.left) < parseInt(off1.left)
						+ parseInt(w1 / 2))
					return 'right';
				return 'left';
			}

		})
	</script>

	<!-- the following scripts are used in demo only for onpage help and you don't need them -->
	<link rel="stylesheet"
		href="${pageContext.request.contextPath }/static/assets/css/ace.onpage-help.css" />
	<link rel="stylesheet"
		href="${pageContext.request.contextPath }/static/docs/assets/js/themes/sunburst.css" />

	<script type="text/javascript">
		ace.vars['base'] = '..';
	</script>

	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace/elements.onpage-help.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace/ace.onpage-help.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/rainbow.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/generic.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/html.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/css.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/javascript.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/js/validate.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/lib/jquery.validate.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/js/useredit.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/js/ajaxfileupload.js"></script>

</body>
</html>
